// src/WorldMap.js
import React from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import HighchartsMap from 'highcharts/modules/map';
import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json';
import { useTranslation } from 'react-i18next';

// Initialize the map module.
HighchartsMap(Highcharts);

const WorldMap = ({countryStatData}) => {
    const { t } = useTranslation();

    const options = {
        chart: {
            // map: mapDataWorld,
            style: {
                fontSize: '1em'
            },
        },
        title: {
            text: t('The number of searches for the keyword from the given area'),
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom',
            },
        },
        colorAxis: {
            min: 0,
        },
        series: [
            {
                data: countryStatData,
                mapData: mapDataWorld,
                joinBy: 'iso-a3',
                name: 'Random data',
                states: {
                    hover: {
                        color: '#a4edba',
                    },
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}',
                },
            },
        ],
        credits: {
            // 是否显示版权链接
            enabled: false
        }
    };

    return (
        <div>
            <HighchartsReact
                highcharts={Highcharts}
                constructorType={'mapChart'}
                options={options}
            />
        </div>
    );
};

export default WorldMap;
